import './aboutUs.scss'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/parallax'
import { useState } from 'react'
import SvgIcon from '@/components/SvgIcon'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay, Pagination } from 'swiper/modules'
import { Input, Form, Select, DatePicker, Button } from 'antd'

function About() {
  const [unfold1, setUnfold1] = useState(true)
  const [unfold2, setUnfold2] = useState(false)
  const [unfold3, setUnfold3] = useState(false)
  // 点击扩展按钮的回调
  const handleUnfold1 = () => {
    setUnfold1(false)
    setUnfold2(false)
    setUnfold3(false)
    setUnfold1(true)
  }
  const handleUnfold2 = () => {
    setUnfold1(false)
    setUnfold2(false)
    setUnfold3(false)
    setUnfold2(true)
  }
  const handleUnfold3 = () => {
    setUnfold1(false)
    setUnfold2(false)
    setUnfold3(false)
    setUnfold3(true)
  }
  return (
    <div className="About">
      <div className="part-three">
        <div className="pthree-left">
          <div className="ptreel-top">为什么选择我们</div>
          <div className="ptreel-center">
            我们致力于提供卓越服务，长期为客户业务发展提供专业支持。
          </div>
          <div className="ptreel-bottom">
            我们的系统能够自动评估学生的学习成果，提供即时反馈，帮助教师和学生更好地理解学习进度和存在的问题。我们始终坚持以客户为中心，不断创新和优化我们的服务，以满足客户的需求。我们的专业团队和丰富的行业经验，使我们成为您值得信赖的智能测评系统合作伙伴。
          </div>
          <div className="btn-conteiner">
            <div className="btn-content">
              <span style={{ fontFamily: 'STKaiti' }} className="btn-title">
                立即体验
              </span>
              <span className="icon-arrow">
                <svg
                  width="66px"
                  height="43px"
                  viewBox="0 0 66 43"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlnsXlink="http://www.w3.org/1999/xlink"
                >
                  <g id="arrow" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                    <path
                      id="arrow-icon-one"
                      d="M40.1543933,3.89485454 L43.9763149,0.139296592 C44.1708311,-0.0518420739 44.4826329,-0.0518571125 44.6771675,0.139262789 L65.6916134,20.7848311 C66.0855801,21.1718824 66.0911863,21.8050225 65.704135,22.1989893 C65.7000188,22.2031791 65.6958657,22.2073326 65.6916762,22.2114492 L44.677098,42.8607841 C44.4825957,43.0519059 44.1708242,43.0519358 43.9762853,42.8608513 L40.1545186,39.1069479 C39.9575152,38.9134427 39.9546793,38.5968729 40.1481845,38.3998695 C40.1502893,38.3977268 40.1524132,38.395603 40.1545562,38.3934985 L56.9937789,21.8567812 C57.1908028,21.6632968 57.193672,21.3467273 57.0001876,21.1497035 C56.9980647,21.1475418 56.9959223,21.1453995 56.9937605,21.1432767 L40.1545208,4.60825197 C39.9574869,4.41477773 39.9546013,4.09820839 40.1480756,3.90117456 C40.1501626,3.89904911 40.1522686,3.89694235 40.1543933,3.89485454 Z"
                      fill="#FFFFFF"
                    ></path>
                    <path
                      id="arrow-icon-two"
                      d="M20.1543933,3.89485454 L23.9763149,0.139296592 C24.1708311,-0.0518420739 24.4826329,-0.0518571125 24.6771675,0.139262789 L45.6916134,20.7848311 C46.0855801,21.1718824 46.0911863,21.8050225 45.704135,22.1989893 C45.7000188,22.2031791 45.6958657,22.2073326 45.6916762,22.2114492 L24.677098,42.8607841 C24.4825957,43.0519059 24.1708242,43.0519358 23.9762853,42.8608513 L20.1545186,39.1069479 C19.9575152,38.9134427 19.9546793,38.5968729 20.1481845,38.3998695 C20.1502893,38.3977268 20.1524132,38.395603 20.1545562,38.3934985 L36.9937789,21.8567812 C37.1908028,21.6632968 37.193672,21.3467273 37.0001876,21.1497035 C36.9980647,21.1475418 36.9959223,21.1453995 36.9937605,21.1432767 L20.1545208,4.60825197 C19.9574869,4.41477773 19.9546013,4.09820839 20.1480756,3.90117456 C20.1501626,3.89904911 20.1522686,3.89694235 20.1543933,3.89485454 Z"
                      fill="#FFFFFF"
                    ></path>
                    <path
                      id="arrow-icon-three"
                      d="M0.154393339,3.89485454 L3.97631488,0.139296592 C4.17083111,-0.0518420739 4.48263286,-0.0518571125 4.67716753,0.139262789 L25.6916134,20.7848311 C26.0855801,21.1718824 26.0911863,21.8050225 25.704135,22.1989893 C25.7000188,22.2031791 25.6958657,22.2073326 25.6916762,22.2114492 L4.67709797,42.8607841 C4.48259567,43.0519059 4.17082418,43.0519358 3.97628526,42.8608513 L0.154518591,39.1069479 C-0.0424848215,38.9134427 -0.0453206733,38.5968729 0.148184538,38.3998695 C0.150289256,38.3977268 0.152413239,38.395603 0.154556228,38.3934985 L16.9937789,21.8567812 C17.1908028,21.6632968 17.193672,21.3467273 17.0001876,21.1497035 C16.9980647,21.1475418 16.9959223,21.1453995 16.9937605,21.1432767 L0.15452076,4.60825197 C-0.0425130651,4.41477773 -0.0453986756,4.09820839 0.148075568,3.90117456 C0.150162624,3.89904911 0.152268631,3.89694235 0.154393339,3.89485454 Z"
                      fill="#FFFFFF"
                    ></path>
                  </g>
                </svg>
              </span>
            </div>
          </div>
        </div>
        <div className="pthree-right">
          <div className="pthreerMain">
            <div onClick={handleUnfold1} className="pthreerOneTitle">
              <p>卓越服务，长期支持</p>
              {!unfold1 ? <SvgIcon name="plus" size="30" /> : <SvgIcon name="minus" size="30" />}
            </div>
            {unfold1 && (
              <div className="pthreerOneContent">
                <img src="/assets/images/support.jpg" alt="" />
                <p>
                  我们致力于提供卓越服务，长期为客户业务发展提供专业支持。我们深知每个业务的成功都需要稳定的后盾。
                </p>
              </div>
            )}
          </div>
          <div style={{ margin: '5px 0' }} className="pthreerMain">
            <div onClick={handleUnfold2} className="pthreerOneTitle">
              <p>智能测评，即时反馈</p>
              {!unfold2 ? <SvgIcon name="plus" size="30" /> : <SvgIcon name="minus" size="30" />}
            </div>
            {unfold2 && (
              <div className="pthreerOneContent">
                <img src="/assets/images/starts.jpg" alt="" />
                <p>
                  我们的智能测评系统能够自动评估学生的学习成果，提供即时反馈，帮助教师和学生全面了解学习进度。
                </p>
              </div>
            )}
          </div>
          <div className="pthreerMain">
            <div onClick={handleUnfold3} className="pthreerOneTitle">
              <p>创新优化，客户至上</p>
              {!unfold3 ? <SvgIcon name="plus" size="30" /> : <SvgIcon name="minus" size="30" />}
            </div>
            {unfold3 && (
              <div className="pthreerOneContent">
                <img src="/assets/images/shopping.jpg" alt="" />
                <p>
                  我们坚持以客户为中心，不断创新和优化我们的服务，以满足客户的需求。我们不断探索新技术，改进产品，力求为客户提供更优质的服务体验。
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
      <div className="part-one-two-between">
        <div className="part-one-two-between-left"></div>
        <div className="part-one-two-between-right"></div>
        <div className="part-one-two-between-center">
          <div>
            <SvgIcon name="trophy" size="80" color="#fff" />
            <div className="test-main">
              <div>540</div>
              <div>获奖</div>
            </div>
          </div>
          <div>
            <SvgIcon name="area" size="80" color="#fff" />
            <div className="test-main">
              <div>48</div>
              <div>地区</div>
            </div>
          </div>
          <div>
            <SvgIcon name="project" size="80" color="#fff" />
            <div className="test-main">
              <div>2310</div>
              <div>产品</div>
            </div>
          </div>
          <div>
            <SvgIcon name="people" size="80" color="#fff" />
            <div className="test-main">
              <div>32k</div>
              <div>用户</div>
            </div>
          </div>
        </div>
      </div>
      <div className="part-four">
        <div className="pf-left">
          <Swiper
            className="mySwiper"
            speed={200}
            loop={true}
            pagination={{ clickable: true }}
            autoplay={{
              delay: 2500, // 自动播放的延迟时间，单位为毫秒
              disableOnInteraction: false, // 用户交互后不会停止自动播放
            }}
            modules={[Pagination, Autoplay]}
          >
            <SwiperSlide>
              <div className="pfSw-top">
                <SvgIcon name="start" size="50" />
                <span
                  style={{ fontFamily: 'STZhongsong', fontWeight: '600', letterSpacing: '1.5px' }}
                >
                  用户反馈
                </span>
              </div>
              <div className="pfSw-center">
                自从使用了贵公司的智能测评系统，我的教学变得更加高效了。系统自动评估学生的学习成果，并提供即时反馈，让我能够及时了解学生的学习进度和存在的问题。这让我能够更精准地指导学生，提高他们的学习效果。
              </div>
              <div className="pfSw-bottom">
                <img src="/assets/images/teacher.jpg" alt="" />
                <span>张老师</span>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="pfSw-top">
                <SvgIcon name="start" size="50" />
                <span style={{ fontFamily: 'STZhongsong', fontWeight: '600' }}>用户反馈</span>
              </div>
              <div className="pfSw-center">
                我使用贵公司的智能测评系统后，发现我的学习效果有了显著的提升。系统能够自动评估我的学习成果，并提供即时反馈，让我能够更好地理解自己的学习进度和存在的问题。这让我能够有针对性地改进，提高学习效率。
              </div>
              <div className="pfSw-bottom">
                <img src="/assets/images/student.jpg" alt="" />
                <span>李同学</span>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="pfSw-top">
                <SvgIcon name="start" size="50" />
                <span style={{ fontFamily: 'STZhongsong', fontWeight: '600' }}>用户反馈</span>
              </div>
              <div className="pfSw-center">
                我儿子的学校采用了贵公司的智能测评系统，我发现这个系统非常实用。系统能够自动评估学生的学习成果，并提供即时反馈，帮助家长更好地了解孩子的学习情况。这让我们能够及时关注孩子的学习进度和存在的问题。
              </div>
              <div className="pfSw-bottom">
                <img src="/assets/images/father.jpg" alt="" />
                <span>王家长</span>
              </div>
            </SwiperSlide>
            <div className="swiper-pagination"></div>
          </Swiper>
        </div>
        <div className="pf-right">
          <div className="pfr-form">
            <div className="pfrf-label">即刻感受</div>
            <Form size="large" style={{ display: 'flex', flexWrap: 'wrap' }}>
              <Form.Item style={{ width: 'calc(60% - 20px)', marginRight: '20px' }}>
                <Input style={{ width: '100%' }} placeholder="姓名" />
              </Form.Item>
              <Form.Item style={{ width: '40%' }}>
                <Select style={{ width: '100%' }} placeholder="性别">
                  <Select.Option value="man">男</Select.Option>
                  <Select.Option value="woman">女</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item style={{ width: 'calc(60% - 20px)', marginRight: '20px' }}>
                <Input style={{ width: '100%' }} placeholder="邮箱" />
              </Form.Item>
              <Form.Item style={{ width: '40%' }}>
                <DatePicker style={{ width: '100%' }} placeholder="请选择生日" />
              </Form.Item>
              <Form.Item style={{ width: '100%' }}>
                <Input style={{ width: '100%' }} placeholder="电话" />
              </Form.Item>
            </Form>
            <Button size="large" type="primary" danger>
              表单提交
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default About
